<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>View Store</title>
<link href="${basePath}/script/JqueryUI/jquery-ui.min.css" rel="stylesheet" type="text/css"/>
<link href="${basePath}/script/Jtable/themes/metro/darkgray/jtable.min.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="${basePath}/script/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="${basePath}/script/JqueryUI/jquery-ui.min.js"></script>
<script type="text/javascript" src="${basePath}/script/Jtable/jquery.jtable.min.js"></script>
<script type="text/javascript" src="${basePath}/script/Jtable/external/json2.min.js"></script>
<script>
  $(function(){
    $('#JTable').jtable({
      title:'Store Info',
      selecting:true,
      paging:false,
      actions:{
    	listAction:'selectStore.action'/* ,
    	createAction:'dd' */
      },
      fields:{
		id:{
		  key: true,
		  list: true,
		  title: 'Store Id'
		},
		manager:{
		  title:'Store Manager',
		  width: '30%',
		  display:function(data){
			var name = data.record.manager.name;
 			return name.firstName + '_' + name.lastName;
		  }
		},
		address:{
		  title:'Store Address',
		  width: '30%',
		  display: function(data){
			return data.record.address.address1;
		  }
		}	
      }
    });
    $('#JTable').jtable('load');
  });
</script>
</head>
<body>
<a href="index.mvc">Return</a>
<a href="selectStore.mvc" target="_blank">view ajax</a>
<div id="JTable"></div>
</body>
</html>